<template>
	<view class="shiming-box">
		<view class="box">
			<view class="row">
				<view class="left">
					姓名
				</view>
				<input type="text" v-model="customerInfo.customerName" placeholder="黎鸣先生" />
			</view>
			
			<singleSelect :pickerSingleJson="idtypeArr" v-on:listenToshimingrenzheng="msgFromChild">
				证件类型
			</singleSelect>
			
			<view class="row">
				<view class="left">
					证件号码
				</view>
				<input type="text" value="" v-model="idCardNum" placeholder="请输入您的证件号码" />
			</view>
			<view class="row mpvue-picker">
				<view class="left">
					所在地区
				</view>
				<input type="text" value="" v-model="pickerText" placeholder=""  disabled @click="showMulLinkageTwoPicker" />
				<label class="iconfont" @click="showMulLinkageTwoPicker">&#xe640;</label>
				
				<mpvue-picker :themeColor="themeColor" ref="mpvuePicker" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
				 @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
				<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
				 @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
			</view>
			<view class="row">
				<view class="left">
					邮箱
				</view>
				<input type="text" value="" v-model="emailTxt" placeholder="请输入邮箱地址" />
			</view>
			<view v-if ="idcardValue != '0'">
				<p class="txt">上传证件照</p>
				<addImage @click="showImg" ></addImage>
			</view>
			
		</view>
		
		<view class="questionBox">
			<view class="question"  @click="toSimufengxianceping">
				<label class="iconfont icon">&#xe66a;</label>提交
			</view>
		</view>
	</view>
</template>

<script>
	import mpvuePicker from '../../../../../../components/mpvue-picker/mpvuePicker.vue';
	// import cityData from '../../../../../../common/city.data.js';
	import mpvueCityPicker from '../../../../../../components/mpvue-citypicker/mpvueCityPicker.vue';
	import addImage from '../../../../../API/image/image.vue';
	import singleSelect from '../../../../../API/common/singleSelect';
	import global_ from '../../../../../../components/tool/RenZhengGlobal';
	export default {
		components:{
			mpvuePicker,
			mpvueCityPicker,
			addImage,
			singleSelect
		},
		data() {
			return {
				themeColor: '#007AFF',
				mode: '',
				deepLength: 1,
				cityPickerValueDefault: [0, 0, 1],
				pickerText:'',
				textValue: '',
				idtypeArr:[],   // 存放证件类型
				pickerValueDefault: [0],
				pickerValueArray:[],
				// mulLinkageTwoPicker: cityData,   // 存放地区列表
				mulLinkageTwoPicker: [],
				customerInfo:{},
				imageList:[],//图片路径
				emailTxt:'',   // 邮箱
				idCardNum:'',  // 身份证号码，
				idcardValue:''
			};
		},
		onLoad:function(){
			//console.log('拿到子===='+this.idcardvalue);
			// console.log('-------------'+this.pickerText);
			this.customerInfo.customerName=uni.getStorageSync("customerInfo");
			this.customerInfo.customerId = uni.getStorageSync('customerId');
			this.getData();
			// console.log("customerInfo========================="+JSON.stringify(customerInfo));
			// console.log('mmmmmmmmmmmmmmm'+this.idtypeArr);
			
		},
		methods: {
			msgFromChild(data){  //  从子组件拿的数据
				// console.log(data,data[0],data[1]);
				this.idcardValue = data[0];
			},
			getData(){
				uni.request({
					method:'GET',
					url: global_.api.SHIMINGRENZHENG_GET, 
					header : {'content-type':'application/x-www-form-urlencoded'},
					data:{
						cCustNo:this.customerInfo.customerId
					},
					dataType:'json',
					success: (res) => {
						console.log("调用接口返回结果"+JSON.stringify(res.data));
						// console.log('============='+res.data.data);
						
						// 拿到新建用户时的地区 
						console.log('拿到用户的地区-=============='+JSON.stringify(res.data.data.userInfo.areaAddress));
						this.pickerText = JSON.parse(JSON.stringify(res.data.data.userInfo.areaAddress));
						
						// 将数据遍历给  证件类型
						var str = JSON.stringify(res.data.data.cardType);
						var obj = JSON.parse(str);
						for(var i = 0;i < obj.length;i++){
							this.idtypeArr[i] = obj[i];
						}
						// console.log('================='+this.idtypeArr);
						// 将数据遍历给  所在地区
						var cityStr = JSON.stringify(res.data.data.cityData);
						var cityObj = JSON.parse(cityStr);   // children
						var arr1 = [];

						// console.log('======='+cityStr);
						for(var m = 0;m < cityObj.length;m++){
							arr1[m] = cityObj[m];
						}
						var str = JSON.stringify(arr1);
						var obj = JSON.parse(str);
						for(var i =0;i<obj.length;i++){
							this.mulLinkageTwoPicker[i] = obj[i];
						}
						// 设置 证件类型
						uni.setStorageSync('idtypeArr1',(JSON.stringify(this.idtypeArr)));
						console.log("获取到的========"+(JSON.stringify(this.idtypeArr)));
						
						
						
					},fail:(res) => {
						console.log("fail");
						//console.log(res.data);
						this.text = 'request fail';
					},complete:(res) => {
						console.log("complete");
						//console.log(res.data);
					}
				});
			},
			onCancel(e) {
				console.log(e)
			},
			onConfirm(e) {
				this.pickerText = e.label,
				console.log('123')
			},
			toSimufengxianceping() {
				uni.setStorageSync('idCardNum',this.idCardNum);  // 设置证件号码缓存
				uni.setStorageSync('pickerText',this.pickerText);   // 地址缓存
				var that=this;
				
				console.log('[用户名]:'+this.customerInfo.customerName+'[证件类型]:'+this.idcardValue+'[证件号码：]'+this.idCardNum+'[地址]：'+this.pickerText+'[邮箱]：'+this.emailTxt+'[客户编号]:'+this.customerInfo.customerId);
				uni.request({
					method:'POST',
					url: global_.api.SHIMINGRENZHENG_SAVE, 
					header : {'content-type':'application/x-www-form-urlencoded'},
					dataType:'json',
					data:{
						'userName':this.customerInfo.customerName,    //客户名称
						'cardType': this.idcardValue,    //证件类型，传递编码
						'cardNo': this.idCardNum,     //证件号码
						'areaAddress':this.pickerText,    //传入对应的中文描
						'email': this.emailTxt,      //邮箱
						'cCustNo':this.customerInfo.customerId    //客户编号,和传递客户名称的时候一样，传递过来
					},
					success: (res) => {
						console.log(res);
						console.log("调用接口返回结果"+JSON.stringify(res.data));
						var pReasonInfo2=res.data.data;
						if(res.data.code!=0){
							var tipMessage=res.data.message;
							uni.showToast({
								title: tipMessage,
								icon: 'none',
								success: res => {},
								fail: () => {},
								complete: () => {}
							});
							return;
						}else{
							if(this.idcardValue!=0 && that.imageList.length>0){
								uni.showLoading({
									title: '数据提交中...',
									mask:true
								});
								var length=that.imageList.length;
								var imageList = that.imageList;
								var filesArray=[];
								for(var i=0;i<imageList.length;i++){
									filesArray[i]={'name':'file'+i,'uri':imageList[i]};
								}
									uni.uploadFile({
										url: global_.api.SHIMINGRENZHENG_UPLOAD, //	上传文件服务器地址
										files:filesArray,
										//filePath:that.imageList[i],
										// name: 'file',
										header:{'content-type':'multipart/form-data'},
										formData: {
											'uploadType': 'CRM',
											//'index':i,
											'fileCount':imageList.length,
											'pReasonInfo2':pReasonInfo2,
											'cCustNo':this.customerInfo.customerId 
										},
										success: (res) => {
											console.info('上传成功')
											uni.hideLoading();
											uni.redirectTo({
												url: '../../../../../my/lcs-wodekehu/kehuxiangqing/kehuxiangqing?news_Id='+this.customerInfo.customerId
											});
										},fail:(res)=>{
											uploadStatus=false;
											console.log(" upload fail........."+JSON.stringify(res));
										},complete:(res)=>{
											console.log("upload complete..........."+JSON.stringify(res))
										}
									})
							}else{
								uni.hideLoading();
								uni.redirectTo({
									url: '../../../../../my/lcs-wodekehu/kehuxiangqing/kehuxiangqing?news_Id='+this.customerInfo.customerId
								});
							}
							
						
						}
					
					},fail:(res) => {
						console.log("fail");
						console.log(JSON.stringify(res));
						this.text = 'request fail';
					},complete:(res) => {
						console.log("complete");
						//console.log(res.data);
					}
				});
				
				/* uni.navigateTo({
					url: '../fenxianceping/simufengxianceping',
					success: res => {},
					fail: () => {},
					complete: () => {}
				}); */
			},
			textChange(evt) {
				this.idCardArray = this.idcardData;
				
				// this.textValue = evt.target.label;
				console.log('-------------'+idCardArray);
				
			},
			showMulLinkageTwoPicker() {
				this.pickerValueArray = this.mulLinkageTwoPicker
				this.mode = 'multiLinkageSelector'
				this.deepLength = 2
				this.pickerValueDefault = [0, 0]
				this.$refs.mpvuePicker.show()
			},
			showImg(e){
				console.info("所选择的图片：》》》》》》》"+e.imageList);
				this.imageList = e.imageList;
			}
		}
	}
</script>

<style>
	page {
		background: rgb(255, 255, 255);
	}

	.shiming-box {}

	.box {
		padding: 0 30upx;
	}

	.shiming {
		background: #f5f5f5;
		line-height: 70upx;
		height: 70upx;
		text-indent: 20upx;
		color: rgba(153, 153, 153, 1);
		font-size: 12px;
	}

	.row {
		height: 98upx;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.row input {
		flex: 3;
	}

	.left {
		font-size: 15px;
		margin-right: 20px;
		flex: 1;
	}

	.questionBox {
		display: flex;
		flex-direction: row;
		justify-content: center;
		width: 100%;
		padding: 40upx 0;
		text-align: center;


	}

	.question {
		width: 240upx;
		height: 70upx;
		background: linear-gradient(-90deg, rgba(196, 156, 90, 1) 0%, rgba(226, 196, 138, 1) 100%);
		border-radius: 35px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		color: rgb(255, 255, 255);

	}

	.icon {
		margin-right: 10upx;
	}

	.radio-box {
		width: 100%;
		text-align: left;
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 100upx;

	}

	.radio {
		display: flex;
		flex-direction: row;
		align-items: center;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);

	}

	.radio image {
		height: 16px;
		width: 16px;
		margin-right: 10upx;
	}
	.txt{
		padding-top: 10px;
	}
</style>
